<template>
  <div class="list">
    <div class="list-l">
        <ul>
            <li v-for="(i , index) in item" :key="index" @click="change(index)" :class=" curIndex == index ? 'active':''">
                {{i.name}}
            </li>
        </ul>
    </div>
    <div class="list-r">
        <ul>
            <li v-for="(i , index) in item" :key="index" class="wai" ref="dom">
                <p class="uname">{{i.name}}</p>
                <ul>
                    <li v-for="(spus , index) in i.spus" :key="index" class="nei">
                        <!-- <template v-for="a in arr" > -->
                        <img :src="spus.picture" class="img">
                        <div class="content">
                            <h3 class="title">
                                {{spus.name}}
                            </h3>
                            <div class="text">
                                {{spus.description}}
                            </div>
                            <div class="saled">
                                {{spus.month_saled_content}}
                            </div>
                            <div class="price">
                                <span class="spus-price">
                                    ￥{{spus.min_price}}
                                </span>
                                <span class="calculate">
                                    <span class="add" @click="jian(spus)" v-if="spus.goods_coupon_compatible_type">
                                        -
                                    </span>
                                    <!-- <span class="num" v-if="a.num > 0">
                                        {{a.num}}
                                    </span> -->
                                    <span class="num" v-if="spus.goods_coupon_compatible_type">
                                        {{spus.goods_coupon_compatible_type}}
                                    </span>
                                    <span class="add" @click="add(spus)">
                                        +
                                    </span>
                                </span>
                            </div>
                        </div>
                        <!-- </template> -->
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <shop-car :flag="flag"></shop-car>
  </div>
</template>

<script>
import BScroll from "better-scroll"
import ShopCar from "@/components/waimai/shopCar.vue"

import '@/assets/css/Normalize.css'

import {getOnePro , addPro} from '@/api/request'
export default {
    data() {
        return {
            list:[],
            curIndex:0,
            itemHeight:[],
            flag:true,
            arr:[],
            
        }
    },
    created() {
       
        this.list=this.$route.query.goods

        // 滚动效果
        this.$nextTick(()=>{
            this.leftScroll = new BScroll(".list-l",{
                probeType: 2,
                click: true
            })

            this.rightScroll = new BScroll(".list-r",{
                probeType: 2,
                click: true
            })
            // 获取每一个模块的高度
            this.itemHeight = this.$refs.dom.map((item)=>{
                return parseInt(item.offsetTop)
            })

            let timer;
            this.rightScroll.on("scroll", pos => {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    this.getIndex(pos)
                },);
                
            });
        })

        // 发送请求获取数据库中的数据
        getOnePro("/getShop" , `${this.$route.params.id}`).then(res=>{
            let {data} = res
            this.arr = data
            
        })
        this.flag = !this.flag
    },
    computed:{
        item(){
            return this.list[0].food_spu_tags
        },
        
    },
    methods:{
        change(i){
            this.curIndex = i
            this.rightScroll.scrollToElement(this.$refs.dom[i],800)
        },
        getIndex(pos){
            let y =parseInt(Math.abs(pos.y))
            let index ;
            for(let i =0 ;i<this.itemHeight.length -1 ; i++){
                if(y > this.itemHeight[i] && y < this.itemHeight[i+1]){
                    index = i
                }
            }
            if(index == undefined){
                index = this.itemHeight.length-1
            }
            this.curIndex = index
        },
        async add(spus){
            let token = localStorage.getItem("token")
            if(token){
                spus.goods_coupon_compatible_type++
                this.flag = !this.flag
                await addPro("/add",{
                    sellid:this.$route.params.id,
                    spusid:spus.id,
                    name:spus.name,
                    price:spus.min_price,
                    num:spus.goods_coupon_compatible_type,
                    image:spus.picture
                }).then(res=>{
                    // console.log(res.data.msg);
                })
            }else{
                alert("请登录")
            }

        },
        jian(spus){
            this.flag = !this.flag
            spus.goods_coupon_compatible_type--

            addPro("/add",{
                sellid:this.$route.params.id,
                spusid:spus.id,
                name:spus.name,
                price:spus.min_price,
                num:spus.goods_coupon_compatible_type,
                image:spus.picture
            }).then(res=>{
                // console.log(res.data.msg);
            })
        }
    },
    components:{
        ShopCar
    },
}
</script>

<style lang="scss" scoped>
li{
    list-style: none;
}
    .list{
        margin-top: .2rem;
        display: flex;

        .list-l{
            overflow: hidden;
            width: 1.8rem;
            background-color: #f8f8f8;
            height: 14rem;
            ul{

                li{
                    height: 1rem;
                    text-align: center;
                    line-height: 1rem;
                    &.active{
                        background-color: pink;
                    }
                }
            }
        }

        .list-r{
            position: relative;
            height: 14rem;
            flex: 1;
            // text-overflow:ellipsis;     
            overflow:hidden;
            // white-space:nowrap;  
            .wai{
                .uname{
                background-color: #bfa;
                height: 0.6rem;
                line-height: .6rem;
                }
                .nei{
                    display: flex;
                    // height: 2.1rem;
                    display: flex;
                    margin: .3rem .1rem;
                    img.img{
                        height: 2rem;
                        width: 2.1rem;
                    }

                    .content{
                        flex: 1;
                        width: 4rem;
                        margin: 0 .1rem .2rem .1rem;

                        .title{
                            font-size: .35rem;
                            margin-bottom: .1rem;
                        }

                        .text{
                            width: 4rem;
                            // width: 100%;
                            font-size: .25rem;
                            text-overflow:ellipsis;     
                            white-space:nowrap;   
                            overflow:hidden;   
                            padding-right: .2rem;
                        }

                        .saled{
                            font-size: .25rem;
                            color: #858687;
                            margin: .2rem 0;
                        }

                        .price{
                            display: flex;
                            justify-content: space-between;
                            .spus-price{
                                color: #FF4A26;
                                font-size: .35rem;  
                            }

                            .add{
                                width: 0.4rem;
                                height: 0.3rem;
                                font-size: .4rem;
                                background-color: pink;
                            }

                            
                        }
                    }
                }
            }
        }
    }
</style>